import Icon from '@/components/Icon'
import { NavBar, Input, Button } from 'antd-mobile'
import styles from './index.module.scss'
import { useNavigate } from 'react-router-dom'
import { io, Socket } from 'socket.io-client'
import { useEffect, useRef, useState } from 'react'
import { observer } from 'mobx-react-lite'
import { getToken } from '@/utils'
import { useStore } from '@/store'
/**
  1. 通信机制：基于socket协议 并且基于事件通信机制 (自定义事件 on/emit)
  2. io是一个方法 用来和后端进行链接时调用 - 传入必要的参数
  3. io方法的返回值 是一个 socketio实例对象 
     作用: 用来接收数据的
     socketio.on('事件名称',(msg)=>{
       // 后端主动向前端客户端发送消息的时候会自动寻找这里的事件名称
       // 这个事件名称是前后端在开发时共同商量的名称  message
       // 只要保证前端监听的事件名称后端触发的事件名称一致即可
     })
     作用：用来发送数据的
     socketio.emit('事件',{
       // 发送的数据
     }
     })
     socketion.close  关闭整个通信 

 */

type Chat = {
  message: string
  type: 'xz' | 'user'
}
const Chat = () => {
  const { userStore } = useStore()
  const navigate = useNavigate()
  const sockectRef = useRef<Socket>()
  // 声明一个存放收发消息的列表 将来显示到视图中

  const [messageList, setMessageList] = useState<Chat[]>([])
  // 1. 使用io方法创建和后端的连接 通道打开
  useEffect(() => {
    const socketIo = io('http://toutiao.itheima.net', {
      query: {
        token: getToken().token,
      },
      transports: ['websocket'],
    })
    // 缓存起来
    sockectRef.current = socketIo
    // 监听是否连接成功 成功打印一个标识
    socketIo.on('connect', () => {
      console.log('当前连接成功,通道完全打开')
    })
    // 3. 接收服务端的响应数据
    socketIo.on('message', (data) => {
      console.log(data)
      // 把小智的消息存入消息列表
      // 别忘了在回调中传入参数 这个参数拿到的才是修改之后的数据
      setMessageList((list) => [
        ...list,
        {
          message: data.msg,
          type: 'xz',
        },
      ])
    })
  }, [])

  // 2. 客户端向服务端发送消息
  // 把input数据收集起来 受控的收集方式
  const [value, setValue] = useState('')
  const onChange = (value: string) => {
    setValue(value)
  }
  const send = () => {
    // 发送消息 因为要拿sockectio实例对象 但是作用域的问题
    // 无法获取 找一个地方缓存起来 实现全局共享
    sockectRef.current?.emit('message', {
      msg: value,
      timestamp: Date.now() + '',
    })
    setMessageList((list) => [
      ...list,
      {
        message: value,
        type: 'user',
      },
    ])
    setValue('')
  }
  return (
    <div className={styles.root}>
      {/* 顶部导航栏 */}
      <NavBar onBack={() => navigate(-1)} className="fixed-header">
        小智同学
      </NavBar>

      {/* 聊天记录列表 */}
      <div className="chat-list">
        {messageList.map((messageItem, index) => {
          if (messageItem.type === 'xz') {
            return (
              <div className="chat-item" key={index}>
                <Icon type="iconbtn_xiaozhitongxue" />
                <div className="message">{messageItem.message}</div>
              </div>
            )
          } else {
            return (
              <div className="chat-item user" key={index}>
                <img src={userStore.userInfo.photo} />
                <div className="message">{messageItem.message}</div>
              </div>
            )
          }
        })}
      </div>

      {/* 底部消息输入框 */}
      <div className="input-footer">
        <div>
          <Icon type="iconbianji" />
          <Input
            value={value}
            onChange={onChange}
            className="no-border"
            placeholder="请描述您的问题"
          />
        </div>
        <Button size="mini" onClick={send}>
          发送
        </Button>
      </div>
    </div>
  )
}

export default observer(Chat)
